<template>
	<view class="wrap">
		<view class="cartListItem"
			v-for="(item,index) in orderList"
			:key="index"
			@tap="goOrderDet(item.id,item.buyDays)"
		>
			<view class="itemCon spaceBet">
				<view class="itemConImg">
					<image class="vip" src="../../../../static/images/zhuxue/vip.png"></image>
				</view>
				<view class="itemConDet">
					<view class="topCon">{{item.content}}</view>
					<view class="midCon" style="margin: 10rpx 0;">订单编号:{{item.orderNoLocal}}</view>
					<view class="midCon">
						受益人:<text class="syUser">{{item.toName}}</text>
					</view>
				</view>
			</view>
			<!-- 实付 --> 
			<view class="actPay spaceBet">
				<view class="actPayPrice" v-if="item.status == 0 || item.status == 1">应付<text class="unit">¥</text><text class="priceNum">{{item.money}}</text></view> 
				<view class="actPayPrice" v-else>实付<text class="unit">¥</text><text class="priceNum">{{item.money}}</text></view> 
				<view class="groupBtn hasFlex">
					<block v-if="item.status == 0">
						<view class="setBtn cancel" @tap.stop="cancelOrder(item.id)">取消订单</view>
						<view class="setBtn fix" style="background: #64ccf3;" @tap.stop="goPay(item)">去支付</view>
					</block>
					<block v-else-if="item.status == 2">
						<view class="setBtn cancel">查看详情</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			orderList:Array,
			payStatus:Number
		},
		methods:{
			goPay(item){
				this.$emit('goPay',item);
			},
			goOrderDet(orderId,buyDays){
				this.$emit('goOrderDet',orderId,buyDays);
			},
			cancelOrder(orderId){
				this.$emit('cancelOrder',orderId);
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import '@/static/scss/orderList.scss';
	.itemConImg{
		background: #ffb900;
		.vip{
			@include respTo(phone){
				width: 112rpx;
				height: 90rpx;
			}
			@include respTo(pad){
				width: 90rpx;
				height: 68rpx;
			}
		}
	}
	.lineTxt{
		margin: 0 10rpx;
	}
	.tkTxt{
		color: $pss-color-green;
	}
	.note{
		font-size: 26rpx;
		color: $pss-color-primary_1;
	}
</style>